<template>
	<view class="product-flow-page">
		<!-- 日期筛选区域 -->
		<view class="filter-section">
			<!-- 日期类型切换 -->
			<view class="date-type-tabs">
				<view
					class="tab-item"
					:class="{ active: dateType === 'day' }"
					@click="switchDateType('day')"
				>
					日
				</view>
				<view
					class="tab-item"
					:class="{ active: dateType === 'month' }"
					@click="switchDateType('month')"
				>
					月
				</view>
			</view>

			<!-- 日期选择器 -->
			<view class="date-selector" @click="showDatePickerModal">
				<u-icon name="calendar" size="16" color="#666"></u-icon>
				<text class="date-text">{{ formattedSelectedDate }}</text>
			</view>
		</view>

		<!-- 表格容器 -->
		<view class="table-container">
			<!-- 表格头部 -->
			<view class="table-header">
				<view class="header-cell date-col">日期</view>
				<view class="header-cell type-col">类型</view>
				<view class="header-cell name-col">商品名称</view>
				<view class="header-cell quantity-col">数量</view>
				<view class="header-cell remark-col">备注</view>
			</view>

			<!-- 表格内容 -->
			<scroll-view
				class="table-content"
				scroll-y="true"
				@scrolltolower="loadMore"
				:refresher-enabled="true"
				:refresher-triggered="refreshing"
				@refresherrefresh="onRefresh"
			>
			<view 
				v-for="(item, index) in displayList" 
				:key="item.id"
				class="table-row"
				:class="{ 'row-even': index % 2 === 1 }"
				@click="handleRowClick(item)"
			>
				<view class="table-cell date-col">
					<text class="date-text">{{ item.date }}</text>
				</view>
				<view class="table-cell type-col">
					<text 
						class="type-text" 
						:style="{ color: item.typeColor }"
					>
						{{ item.type }}
					</text>
				</view>
				<view class="table-cell name-col">
					<text class="name-text">{{ item.productName }}</text>
				</view>
				<view class="table-cell quantity-col">
					<text 
						class="quantity-text" 
						:style="{ color: getQuantityColor(item.quantity) }"
					>
						{{ formatQuantity(item.quantity) }}
					</text>
				</view>
				<view class="table-cell remark-col">
					<text class="remark-text">{{ item.remark }}</text>
				</view>
			</view>

			<!-- 加载状态 -->
			<view class="load-status" v-if="displayList.length > 0">
				<text v-if="loadingMore">加载中...</text>
				<text v-else-if="!hasMore">没有更多数据了</text>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="!loading && displayList.length === 0">
				<u-empty text="暂无流水记录" mode="data"></u-empty>
			</view>
		</scroll-view>
		</view>

		<!-- 日期选择器弹窗 - uView 1.x 兼容 -->
		<u-picker
			v-model="showDatePicker"
			:mode="datePickerMode"
			:params="datePickerParams"
			@confirm="onDateConfirm"
			@cancel="onDateCancel"
		></u-picker>

		<!-- 加载遮罩 -->
		<view v-if="loading" class="loading-overlay">
			<u-loading mode="circle" size="24"></u-loading>
			<text class="loading-text">加载中...</text>
		</view>
	</view>
</template>

<script>
import productFlowMixin from '@/pagesData/mixins/productFlowMixin.js'

export default {
	name: 'ProductFlow',
	mixins: [productFlowMixin],
	
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack()
		}
	}
}
</script>

<style lang="scss" scoped>
.product-flow-page {
	height: 100vh;
	background-color: #f5f6fa;
	display: flex;
	flex-direction: column;
}



// 自定义导航栏
.custom-navbar {
	background-color: #fff;
	padding-top: var(--status-bar-height);
	border-bottom: 1px solid #eee;
	
	.navbar-content {
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
		
		.navbar-left {
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.navbar-title {
			font-size: 18px;
			font-weight: 600;
			color: #333;
		}
		
		.navbar-right {
			width: 40px;
		}
	}
}

// 筛选区域
.filter-section {
	background-color: #f8f9fa;
	padding: 15px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 60px;
	
	.date-type-tabs {
		display: flex;
		background-color: #f5f6fa;
		border-radius: 6px;
		padding: 2px;
		
		.tab-item {
			padding: 8px 20px;
			border-radius: 4px;
			font-size: 14px;
			color: #666;
			transition: all 0.3s;
			
			&.active {
				background-color: #007aff;
				color: #fff;
			}
		}
	}
	
	.date-selector {
		display: flex;
		align-items: center;
		padding: 8px 12px;
		background-color: #f5f6fa;
		border-radius: 6px;
		
		.date-text {
			margin-left: 6px;
			font-size: 14px;
			color: #333;
		}
	}
}

// 表格容器
.table-container {
	flex: 1;
	background-color: #fff;
	margin: 10px 20px 20px;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

// 表格样式
.table-header {
	background-color: #f8f9fa;
	display: flex;
	align-items: center;
	height: 48px; // 固定高度，保持一致
	border-bottom: 1px solid #e9ecef;
	
	.header-cell {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		font-weight: 600;
		color: #495057;
		padding: 15px 10px;

		&.date-col { width: 60px; }
		&.type-col { width: 60px; }
		&.name-col { flex: 1; justify-content: flex-start; }
		&.quantity-col { width: 80px; }
		&.remark-col { width: 80px; }
	}
}

.table-content {
	max-height: calc(100vh - 300px);
	
	.table-row {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f0f0f0;

		&.row-even {
			background-color: #fafbfc;
		}

		&:active {
			background-color: #e3f2fd;
		}
		
		.table-cell {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 15px 10px;
			font-size: 14px;
			text-align: center;
			
			&.date-col {
				width: 60px;
			}
			
			&.type-col {
				width: 60px;
			}

			&.name-col {
				flex: 1;
				justify-content: flex-start;
			}

			&.quantity-col {
				width: 80px;
			}

			&.remark-col {
				width: 80px;
			}
		}
	}
}

// 加载状态
.load-status {
	padding: 20px;
	text-align: center;
	color: #999;
	font-size: 14px;
}

// 空状态
.empty-state {
	padding: 60px 20px;
}

// 加载遮罩
.loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.8);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 9999;

	.loading-text {
		margin-top: 10px;
		font-size: 14px;
		color: #666;
	}
}
</style>
